iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

網頁前端設計系列 第 10

Day10-HTML(八):超連結

  • 分享至 

  • xImage
  •  

這次要來介紹超連結,透過點選藍字可以跳轉到另外一個頁面。那麼就開始吧~
(๑•̀ㅂ•́)و✧

瀏覽器通常會用不同的顏色、大小或樣式來顯示超連結,而且滑鼠游標移動到超連結上時,也會變成可點選的手指指標。超連結在大部分的瀏覽器上顯示成加底線的藍色字體,而當這個連結已經被選取過時,則會轉變成紫色。

<a> 超連結

用來建立超連結,以通往其他頁面、檔案、Email地址、或其他URL的超連結。

1. href 指定一個連結的 URL

<a href="(連結的URL)">(替代文字)</a>

  • 例如:
    <a href="https://www.google.com/">Google連結</a>
    https://ithelp.ithome.com.tw/upload/images/20220910/20151992WmSJ0KeCnE.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220910/20151992skRjnnk0kI.png
    -> 點選連結,會跳轉到另一個頁面
    https://ithelp.ithome.com.tw/upload/images/20220910/201519923b1KQgPedd.png

2. target 指定在什麼地方打開連結

屬性有:

  1. _self:在當前視窗開啟,是預設值。
  2. _blank:在新視窗開啟。
  3. _parent:在上一層父視窗開啟。
  4. _top:在最頂層父視窗開啟。
  5. framename:指定在哪個框架中開啟。
  • 例如:
    <a href="https://www.google.com/" target="_blank">Google連結</a>新開視窗
    https://ithelp.ithome.com.tw/upload/images/20220910/20151992RUIUiPGN29.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220910/20151992qOAKkXz50I.png
    -> 點選連結,會新開視窗
    https://ithelp.ithome.com.tw/upload/images/20220910/20151992TDzttbs1EW.png

3. download

當使用者點擊連結時,用來指示瀏覽器直接下載連結指向的資源。

  • <a href="(連結的URL)" download="(檔名)">下載圖片</a>

4. mailto: 電子信箱超連結

如果瀏覽器有支援的話,點選連結會開啟編輯器寫信。

  • <a href="mailto:example@gmail.com">連絡信箱</a>

5. tel: 電話號碼超連結

如果裝置支援的話,例如說手機,點選連結就可以直接撥打電話。其中電話號碼是遵循RFC 3966標準格式。

  • <a href="tel:(電話號碼)">連絡電話</a>

6. 圖片超連結

<a>可以包住其他HTML的元素,讓它們也可以是一個連結。

  • <a href="https://example.com/" target="_blank">
    <img src="(圖片網址)">
    </a>

祝各位朋友們~

☾ 中秋佳節愉快 ☽


上一篇
Day9-HTML(七):水平分隔線與項目列表清單
下一篇
Day11-HTML(九):圖片
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言